<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>数据源管理</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- 引入数据源管理页面私有样式 -->
    <link rel="stylesheet" href="/css/datasource.css">
</head>
<body>
<div class="container">
    <h1>📊 数据源管理</h1>
    <a href="/" class="back-link">← 返回首页</a>
    <button type="button" onclick="openAddModal()">+ 添加数据源</button>

    <!-- 数据源列表展示区域 -->
    <div class="section">
        <h2>数据源列表</h2>
        <div id="listContainer"><p class="loading">加载中...</p></div>
    </div>
</div>

<!-- 添加数据源弹窗 -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeAddModal()">&times;</span>
        <h2>添加数据源</h2>
        <form id="addForm">
            <!-- 数据库类型选择 -->
            <label for="dbType">数据库类型:</label>
            <select id="dbType" required>
                <option value="">-- 请选择 --</option>
                <option value="mysql">MySQL</option>
                <option value="sqlserver">SQL Server</option>
                <option value="postgresql">PostgreSQL</option>
                <option value="kingbase">Kingbase</option>
            </select>

            <!-- 主机IP地址 -->
            <label for="host">IP 地址:</label>
            <input type="text" id="host" required placeholder="如 192.168.1.100">

            <!-- 端口号 -->
            <label for="port">端口:</label>
            <input type="number" id="port" required placeholder="如 3306">

            <!-- 用户名 -->
            <label for="username">用户名:</label>
            <input type="text" id="username" required>

            <!-- 密码 -->
            <label for="password">密码:</label>
            <input type="password" id="password" required>

            <!-- 提交按钮 -->
            <button type="submit">确认添加</button>

            <!-- 状态提示 -->
            <div id="addStatus" class="status"></div>
        </form>
    </div>
</div>

<!-- JavaScript 引入顺序：先工具，再API，最后业务逻辑 -->
<script src="/js/utils.js"></script>
<script src="/js/api.js"></script>
<script src="/js/datasource.js"></script>
</body>
</html>
